<template>
    <a-row :gutter="[16, 16]">
        <a-col :span="24">
            <a-card>
                <a-form>
                    <a-row :gutter="[16, 16]">
                        <a-col
                            :lg="6"
                            :md="12"
                            :sm="24"
                            v-for="item in searcher"
                            :key="item.dataIndex"
                        >
                            <a-form-item :label="item.title">
                                <a-input v-model:value="where[item.dataIndex]">
                                </a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :lg="6" :md="12" :sm="24">
                            <a-form-item>
                                <a-space>
                                    <a-button type="primary"> 查询 </a-button>
                                    <a-button
                                        v-if="columns.length > 3"
                                        @click="isMore = !isMore"
                                    >
                                        更多
                                    </a-button>
                                </a-space>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </a-card>
        </a-col>
        <a-col :span="24">
            <a-card>
                <a-row :gutter="[16, 16]">
                    <a-col :span="12">
                        <slot name="toolbar"></slot>
                    </a-col>
                    <a-col :span="12" style="text-align: right">
                        <slot name="toolkit">
                            <a-space>
                                <a-button>设置</a-button>
                            </a-space>
                        </slot>
                    </a-col>
                    <a-col :span="24">
                        <a-table
                            :columns="columns"
                            :dataSource="dataSource"
                            :rowSelection="rowSelection"
                            v-bind="attrs"
                        >
                            <template #bodyCell="attrs">
                                <slot name="bodyCell" v-bind="attrs"></slot>
                            </template>
                        </a-table>
                    </a-col>
                </a-row>
            </a-card>
        </a-col>

        <slot name="editor"></slot>
    </a-row>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from "vue";
import { reloadApi } from "@/api/table/index";

export default defineComponent({
    emits: ["update:selection"],
    props: {
        where: Object,
        columns: Array,
        selection: Array,
        current: Object,
        rowSelection: Object,
        url: {
            type: String,
            required: true,
        },
    },
    setup(props, { emit, attrs }) {
        const isMore = ref(false);
        const dataSource = ref([]);

        // 查询器
        const searcher = computed(() => {
            if (!props.columns) {
                return [];
            }

            return props.columns.length <= 3 || isMore.value
                ? props.columns
                : props.columns.slice(0, 3);
        });

        // 选择改变
        const onSelectChange = (changableRowKeys: string[]) => {
            emit("update:selection", changableRowKeys);
        };

        // 选择器配置
        const rowSelection = computed(() => {
            if (props.selection || props.current) {
                return {
                    type: props.selection ? "checkbox" : "radio",
                    selectedRowKeys: props.selection,
                    onChange: onSelectChange,
                    ...props.rowSelection,
                };
            }

            return null;
        });

        const reload = () => {
            reloadApi(props.url, props.where).then((res) => {
                dataSource.value = res.data;
            });
        };

        onMounted(() => {
            reload();
        });

        return { reload, dataSource, isMore, searcher, rowSelection, attrs };
    },
});
</script>
